<template>
  <div>
    <!-- 添加或修改老师信息对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="老师名称" prop="teacherName">
          <el-input v-model="form.teacherName" placeholder="请输入老师名称" />
        </el-form-item>
        <el-form-item label="老师手机" prop="teacherMobile">
          <el-input
            v-model="form.teacherMobile"
            placeholder="请输入老师手机号码"
          />
        </el-form-item>
        <el-form-item label="老师头像">
          <imageUpload v-model="form.headUrl" :limit="1"/>
        </el-form-item>
        <el-form-item label="老师性别" prop="teacherSex">
          <el-select v-model="form.teacherSex" placeholder="请选择老师性别">
            <el-option
              v-for="dict in dict.type.sys_user_sex"
              :key="dict.value"
              :label="dict.label"
              :value="parseInt(dict.value)"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="出生日期" prop="teacherBirthday">
          <el-date-picker
            clearable
            size="small"
            v-model="form.teacherBirthday"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择出生日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="教师简述" prop="teacherBirthday">
          <el-input type="textarea" v-model="form.teacherSketch"></el-input>
        </el-form-item>
        <el-form-item label="详细介绍" prop="teacherBirthday">
          <editor v-model="form.detailedIntroduction" :min-height="192"/>
        </el-form-item>
        <el-form-item label="上传附件">
          <el-upload
            class="upload-demo"
            :limit="1"
            :action="uploadImgUrl"
            :headers="headers"
            :on-error="handleUploadError"
            :on-success="handleUploadSuccess"
            :on-remove="handleRemove"
            :before-upload="beforeUpload"
            :file-list="form.fileList"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="在职状态" prop="state">
          <el-select v-model="form.state" placeholder="请选择在职状态">
            <el-option
              v-for="dict in dict.type.sys_staff_type"
              :key="dict.value"
              :label="dict.label"
              :value="parseInt(dict.value)"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { updateTeacher, addTeacher } from "@/api/school/teacher";
import { getToken } from "@/utils/auth";
export default {
  dicts: ["sys_user_sex","sys_staff_type"],
  data() {
    return {
      uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的文件服务器地址
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {
          fileList: [],
      },
      // 表单校验
      rules: {
        teacherName: [
          { required: true, message: "请输入老师名称", trigger: "blur" },
        ],
        teacherMobile: [
          { required: true, message: "请输入老师手机号码", trigger: "blur" },
        ],
        state: [
          { required: true, message: "请输入在职状态", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    handleRemove(file, fileList) {
      const findex = this.form.fileList.map((f) => f.name).indexOf(file.name);
      if (findex > -1) {
        this.form.fileList.splice(findex, 1);
        this.form.remake = this.listToString(this.form.fileList);
      }
    },
    // 对象转成指定字符串分隔
    listToString(list) {
        console.log(list, 'list')
      let strs = "";
      list.forEach(item => {
        strs += item.name
      });
      console.log(strs, 'strs')
      return strs;
    },
    // 上传成功回调
    handleUploadSuccess(res) {
      this.form.fileList.push({ name: res.fileName, url: res.fileName });
      this.form.remake = this.listToString(this.form.fileList);
      this.loading.close();
    },
    // 上传失败
    handleUploadError() {
      this.$message({
        type: "error",
        message: "上传失败",
      });
      this.loading.close();
    },
    beforeUpload(file) {
        this.loading = this.$loading({
            lock: true,
            text: "上传中",
            background: "rgba(0, 0, 0, 0.7)",
        });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            updateTeacher(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.$emit("updatedata");
            });
          } else {
            addTeacher(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.$emit("updatedata");
            });
          }
        }
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        remake: null,
        teacherNumber: null,
        teacherName: null,
        teacherMobile: null,
        headUrl: null,
        fileList: [],
        teacherSex: null,
        teacherBirthday: null,
        createTime: null,
        updateTime: null,
      };
      this.resetForm("form");
    },
  },
};
</script>

<style>
</style>